<template>
  <view class="box">
    <view class="statusBar" :style="'height:' + statusBarHeight + 'px'"></view>

    <view class="head">
      <!--  #ifndef MP-ALIPAY -->
      <text @click="$utils.toUrl('/pages/home/home', 'switchtab')"></text>
      <!--  #endif -->
      <view>{{ $t("login.please") }}</view>
    </view>
    <view class="login-content">
      <!-- <image class="logo-bg" :src="stores.passport_bg" v-if="stores.passport_bg" mode="aspectFill"></image> -->
      <view class="por">
        <view
          class="app"
          v-if="current_env !== 'toutiao' && current_env != 'weixin'"
        >
          <image :src="storeLogo" mode="aspectFill"></image>
          <text>{{ storeName }}</text>
        </view>
        <template v-if="stores.alipay_login_toggle == 1">
          <view class="login-from-wrap">
            <view class="input-wrap">
              <input
                type="number"
                v-model="mobile"
                placeholder="请输入手机号"
              />
            </view>
            <view class="input-wrap">
              <input
                type="number"
                v-model="sms_code"
                placeholder="请输入验证码"
              />
              <view @click="getCode">{{ tips }}</view>
            </view>
            <view class="login-btn" @click="onSmsLogin">登录</view>
          </view>
        </template>
        <template v-else>
          <!-- <button  v-if="!visiable" type="primary" class="btn"  @click="authLogin">{{$t('login.authorizes')}}</button> -->
          <button
            v-if="current_env == 'alipay' && is_isv == 'getUserInfo'"
            class="btn"
            :open-type="is_isv"
            :scope="scope"
            @click="onGetAuthorizeByAlipay"
            @error="onAuthError"
          >
            {{ $t("login.loginAuth") }}
          </button>
          <button
            v-if="current_env == 'alipay' && is_isv == 'getPhoneNumber'"
            class="btn"
            open-type="getPhoneNumber"
            scope="phoneNumber"
            @click="onGetAuthorizeByAlipay"
            @error="onAuthError"
            @getphonenumber="onGetPhoneNumberAlipay"
          >
            {{ $t("login.loginAuth") }}
          </button>
          <template v-if="current_env == 'weixin' || current_env == 'toutiao'">
            <button
              v-if="current_env == 'weixin'"
              class="avatar-wrapper button-initial"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
              @click="handle"
            >
              <image
                class="avatar"
                :src="WeChat.avatar_url || asyncImgs.union.toux"
                mode="aspectFill"
              ></image>
            </button>

            <button
              @click="checkPhoto"
              v-else
              class="avatar-wrapper button-initial"
            >
              <image
                class="avatar"
                :src="WeChat.avatar_url || asyncImgs.union.toux"
                mode="aspectFill"
              ></image>
            </button>

            <view class="nicknameBox">
              <view class="name">昵称</view>
              <view class="inp">
                <u-input
                  class="inp-inp"
                  height="108"
                  clearable
                  :border="false"
                  v-model="WeChat.nickname"
                  type="nickname"
                  placeholder="请输入昵称"
                ></u-input>
              </view>
            </view>

            <view class="porBtn" v-if="current_env == 'weixin'">
              <view
                v-if="isSubmit"
                class="verification"
                @click="verification"
              ></view>
              <button
                v-if="login_use_mobile"
                type="primary"
                class="btn"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
              >
                <!-- #ifdef MP-WEIXIN -->
                {{ $t("login.wxLogin") }}
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                {{ $t("login.weChat") }}
                <!-- #endif -->
              </button>
              <button v-else type="primary" class="btn" @click="loginSubmit()">
                <!-- #ifdef MP-WEIXIN -->
                <text
                  class="iconfont icon-wechat"
                  style="
                    color: #fff;
                    font-size: 40rpx;
                    font-weight: 400;
                    margin-right: 14rpx;
                  "
                ></text>
                {{ $t("login.wxLogin") }}
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                {{ $t("login.weChat") }}
                <!-- #endif -->
              </button>
            </view>

            <div class="porBtn" v-if="current_env === 'toutiao'">
              <button
                v-if="!access_token"
                @click="ttUserInfo"
                class="button-initial btn toutiao-bt"
              >
                抖音快捷登录
              </button>
              <button
                v-else
                @click="toutiaoSubmit"
                class="button-initial btn toutiao-bt"
              >
                抖音快捷登录
              </button>
            </div>

            <view
              @click="$utils.goBack()"
              class="noLogin"
              style="
                font-size: 28rpx;
                text-align: center;
                padding-top: 60rpx;
                color: #8c8c8c;
              "
              >暂不登录</view
            >
          </template>
        </template>
      </view>

      <!-- 底部协议 -->
      <view class="tcp-box por">
        <view class="por">
          <checkbox :checked="checked" @click="checked = !checked"></checkbox>
          <!-- #ifdef MP-WEIXIN -->
          <view class="ts" v-if="!checked"> 请先阅读并勾选使用协议 </view>
          <!-- #endif -->
        </view>
        <text
          @click.stop="
            $utils.toUrl(
              '/user/my/article-detail?id=' + stores.client_service_id
            )
          "
          >《服务条款》</text
        >
        <text style="margin: 0 5rpx; color: #262626">{{
          $t("login.and")
        }}</text>
        <text
          @click.stop="
            $utils.toUrl(
              '/user/my/article-detail?id=' + stores.client_privacy_id
            )
          "
          >《隐私政策》</text
        >
      </view>
    </view>
    <BindRelation ref="BindRelation" @login="onBindLogin"></BindRelation>

    <u-popup v-model="popShow" mode="center" width="80%" border-radius="24">
      <view class="pop">
        <view class="popTit">温馨提示</view>
        <view class="popDes">
          欢迎使用，在你使用前，请你务必审慎阅读、充分理解服务条款和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你个人信息的情况等。你可阅读
          <text
            @click.stop="
              $utils.toUrl(
                '/user/my/article-detail?id=' + stores.client_service_id
              )
            "
            >《服务条款》</text
          >和<text
            @click.stop="
              $utils.toUrl(
                '/user/my/article-detail?id=' + stores.client_privacy_id
              )
            "
            >《隐私政策》</text
          >了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。
        </view>
        <view class="popBtn">
          <view class="view" @click="popShow = false">不同意</view>

          <view class="view s1" @click.capture="setChecked">
            <button
              v-if="stores.alipay_login_toggle == 1"
              @click="onSmsLogin()"
            >
              同意
            </button>
            <template v-else>
              <button
                v-if="login_use_mobile"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
              >
                同意
              </button>
              <button v-else @click="loginSubmit()">同意</button>
            </template>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { passportCode, getUserInfoById } from "@/api/login";
import { getStoreSwitch } from "@/api/system";
import BindRelation from "./BindRelation";
export default {
  data() {
    return {
      active: false,
      statusBar: 0,
      phone: null,
      visiable: true,
      mobile: "",
      sms_code: "",
      tips: "获取验证码",
      is_isv: "getPhoneNumber",
      scope: "phoneNumber",
      WeChat: {
        avatar_url: "",
        nickname: ""
      },
      isSubmit: true,
      encryptedData: null,
      checked: false,
      login_use_mobile: 1,
      enforce_bind_parent: 0, // 是否强制绑定上级
      is_exist_user: 0, // 是否在当前商城已经存在用户
      access_token: "",
      codeUserInfo: {},

      popShow: false
    };
  },
  components: {
    BindRelation
  },
  created() {
    // #ifdef MP-WEIXIN || MP-TOUTIAO
    this.getUserNameAvatar();
    // #endif
    // #ifdef MP-ALIPAY
    let mini_id = "",
      isvAppid = "";
    let that = this;
    my.getExtConfig({
      success: (res) => {
        if (res.data) {
          that.is_isv = "getUserInfo";
          that.scope = "userinfo";
        }
      }
    });
    // #endif
  },
  computed: {
    login_name: function () {
      // #ifdef MP-WEIXIN
      return this.$t("login.wxLogin");
      // #endif
      // #ifdef MP-ALIPAY
      return this.$t("login.weChat");
      // #endif
    },
    current_env: function () {
      // #ifdef MP-WEIXIN
      return "weixin";
      // #endif
      // #ifdef MP-ALIPAY
      return "alipay";
      // #endif
      // #ifdef MP-TOUTIAO
      return "toutiao";
      // #endif
    },
    noLoginTabarPath() {
      return this.$store.getters.noLoginTabarPath;
    },
    routeType() {
      return this.$store.getters.routeType;
    }
  },
  methods: {
    toutiaoSubmit() {
      if (!this.verification()) return;
      if (this.access_token) {
        this.afterLogin({ msg: "登录成功", data: this.codeUserInfo });
        return;
      }
      // 跳转手机号绑定

      this.$utils.toUrl(
        `/user/my/mobile?params=${encodeURIComponent(
          JSON.stringify({
            noLoginTabarPath: this.noLoginTabarPath,
            routeType: this.routeType,
            nickname: this.WeChat.nickname,
            avatar_url: this.WeChat.avatar_url
          })
        )}`
      );
    },
    ttUserInfo(e) {
      if (!this.checked) {
        uni.showToast({
          title: "请同意服务条约及隐私协议",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      tt.getUserProfile({
        success: (res) => {
          let { userInfo } = res;
          this.WeChat = {
            nickname: userInfo.nickName,
            avatar_url: userInfo.avatarUrl
          };
          this.toutiaoSubmit();
        }
      });
    },
    // 上传头像
    checkPhoto() {
      this.$utils.uploadImage(1, (res) => {
        this.WeChat.avatar_url = res;
      });
    },

    // 获取头像
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.$http.UPLOAD_IMAGE(avatarUrl, (res) => {
        if (res.code == 0) {
          this.WeChat.avatar_url = res.url;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          });
        }
      });
    },

    getUserNameAvatar(v) {
      uni.login({
        success: async (success) => {
          const res = await passportCode({
            code: success.code
          });

          if (res.code || !res.data) return;
          let {
            avatar_url,
            nickname,
            login_use_mobile,
            enforce_bind_parent,
            is_exist_user,
            access_token
          } = res.data;
          if (this.current_env == "toutiao") {
            this.codeUserInfo = res.data;
          }
          this.access_token = access_token;
          this.WeChat = {
            avatar_url: avatar_url || "",
            nickname: nickname || ""
          };
          this.login_use_mobile = login_use_mobile;
          this.enforce_bind_parent = enforce_bind_parent;
          this.is_exist_user = is_exist_user;
        },
        complete: () => {
          this.$utils.checkWxSession();
        }
      });
    },

    async onSmsLogin() {
      if (!this.checked) {
        this.popShow = true;
        return false;
      }

      if (!this.mobile) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.$u.test.mobile(this.mobile)) {
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.sms_code) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      try {
        const share_user_id = uni.getStorageSync("parent_user_id");
        const page_type = uni.getStorageSync("page_type");
        let result = await this.$allrequest.user.user_login(
          {
            phone: this.mobile,
            verify_code: this.sms_code,
            share_user_id: share_user_id ? share_user_id : 0,
            _platform: "phone",
            page_type,
            login_type: 1
          },
          true
        );
        if (result.code == 0) {
          let that = this;
          uni.setStorageSync("token", result.data.access_token);
          // #ifdef MP-WEIXIN
          // 修改用户信息为微信信息
          uni.login({
            provider: "weixin",
            complete(log_res) {
              if (log_res.errMsg === "login:ok") {
                that.$allrequest.user
                  .updateUserWechatOpenId({ code: log_res.code })
                  .then();
              }
            }
          });
          uni.showModal({
            title: this.$t("login.tip"),
            content: this.$t("login.userInfo"),
            success: (res) => {
              if (res.confirm) {
                uni.getUserProfile({
                  desc: this.$t("user.getSex"),
                  success: async (res) => {
                    var res1 = await this.$allrequest.user.modifyUserInfo({
                      avatar_url: res.userInfo.avatarUrl,
                      nickname: res.userInfo.nickName,
                      gender: res.userInfo.gender
                    });
                    if (res1.code == 0) {
                      uni.showToast({
                        title: this.$t("login.success"),
                        icon: "none",
                        duration: 1000
                      });

                      setTimeout(() => {
                        // 更新数据为微信数据存储缓存
                        result.data.avatar_url = res.userInfo.avatarUrl;
                        result.data.nickname = res.userInfo.nickName;
                        result.data.gender = res.userInfo.gender;
                        result.data.is_can_wechat = 0;
                        uni.setStorageSync("userInfo", result.data);
                        this.$store.commit("setUserInfo", result.data);
                        // if (this.$store.getters.has_is_one_store && result.data.store_id && result.data.store_id > 0) {
                        // 	uni.setStorageSync("store_id", result.data.store_id)
                        // }
                        // this.$utils.toUrl("/pages/my/my", "switchtab");
                        this.loginBack();
                      }, 1000);
                    }
                  },
                  fail: (err) => {
                    this.$utils.toast(this.$t("user.getFail"));
                  }
                });
              } else if (res.cancel) {
                this.$utils.toast(this.$t("login.cancle"));
                uni.setStorageSync("token", "");
                // #ifdef MP-WEIXIN
                this.$utils.checkWxSession();
                // #endif
              }
            }
          });
          // #endif

          // #ifdef MP-ALIPAY
          if (
            result.data.alipay_open_id == null ||
            result.data.alipay_open_id == ""
          ) {
            uni.login({
              provider: "alipay",
              scopes: "auth_user",
              success: (ress) => {
                this.$allrequest.user.auth_user_alipay({
                  authCode: ress.authCode,
                  user_id: result.data.id
                });
              },
              fail: (res) => {
                uni.showToast({
                  title: JSON.stringify(res),
                  icon: "none",
                  duration: 1000
                });
              }
            });
          }
          uni.showToast({
            title: result.msg,
            icon: "none",
            duration: 1000
          });
          setTimeout(() => {
            this.afterLogin(result);
          }, 1000);
          // #endif
        } else {
          uni.showToast({
            title: result.msg,
            icon: "none",
            duration: 1000
          });
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          title: "登录失败",
          icon: "none",
          duration: 1000
        });
      }
    },
    // 倒计时
    codeChange(text) {
      let start = text;
      this.tips = start + "秒";
      var setTime = setInterval(() => {
        start--;
        if (start <= 1) {
          clearInterval(setTime);

          this.tips = "获取验证码";
        } else {
          this.tips = start + "秒";
        }
      }, 1000);
    },
    // 获取验证码
    async getCode() {
      if (!this.mobile) {
        return this.$u.toast("请输入手机号");
      }
      if (!this.$u.test.mobile(this.mobile)) {
        return this.$u.toast("手机号格式不正确");
      }
      // 倒计时未结束
      if (this.tips != "获取验证码") return;

      // 向后端请求验证码
      let data = {
        phone: this.mobile,
        code_type: "login"
      };
      try {
        uni.showLoading({
          title: "发送中"
        });
        const res = await this.$allrequest.user.sms_code(data);
        if (res.code != 0) throw new Error(res);
        // 开始倒计时60秒
        this.codeChange(60);
        uni.hideLoading();
      } catch (res) {
        uni.hideLoading();
        this.$u.toast(res.msg || this.$t("user.err"));
      }
    },
    toBind(type) {
      // #ifdef APP-PLUS
      uni.login({
        provider: type,
        success: (loginRes) => {
          uni.getUserInfo({
            provider: type,
            success: (infoRes) => {
              if (type == "weixin") {
                this.appWeixinLogin(infoRes);
              }
            }
          });
        }
      });
      // #endif
      //getUserProfile仅支持微信小程序 app登录需条件编译登录逻辑 TODO
      // #ifdef MP-WEIXIN
      uni.getUserProfile({
        desc: this.$t("login.authorization"),
        success: (infoRes) => {
          uni.login({
            provider: type,
            success: (loginRes) => {
              if (type == "weixin") {
                this.newWeiXinLogin(infoRes, loginRes.code);
              }
            }
          });
        },
        fail: (res) => {
          this.$utils.toast(this.$t("login.fail"));
        }
      });
      // #endif
    },
    async appWeixinLogin(infoRes) {
      try {
        let result = await this.$allrequest.user.user_login({
          ...infoRes,
          user_info: infoRes.userInfo,
          _platform: "app"
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    async weiXinLogin(infoRes, code) {
      try {
        const share_user_id = uni.getStorageSync("");
        let result = await this.$allrequest.user.user_login({
          ...infoRes,
          user_info: infoRes.userInfo,
          encrypted_data: infoRes.encryptedData,
          _platform: "wx",
          share_user_id: share_user_id ? share_user_id : 0,
          code
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    async newWeiXinLogin(infoRes, code) {
      try {
        const share_user_id = uni.getStorageSync("parent_user_id");
        const page_type = uni.getStorageSync("page_type");

        let result = await this.$allrequest.user.user_login({
          ...infoRes,
          user_info: infoRes.userInfo,
          encrypted_data: infoRes.encryptedData,
          _platform: "wx",
          phone: this.phone,
          share_user_id: share_user_id ? share_user_id : 0,
          code,
          page_type
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    afterLogin(result) {
      this.active = uni.getStorageSync("mch_id") || 0;
      uni.setStorageSync("token", result.data.access_token);
      uni.removeStorageSync("storeMdData");

      uni.showToast({
        title: result.msg,
        duration: 1000,
        icon: "none"
      });
      setTimeout(() => {
        uni.setStorageSync("userInfo", result.data);
        this.$store.commit("setUserInfo", result.data);
        // this.$utils.toUrl("/pages/my/my", "switchtab");
        console.log("入驻商登录");
        if (this.active) {
          this.$utils.toUrl(
            "/mch_store/mchCommodity/mchCommodity?login=1",
            "reLaunch"
          );
          return;
        }

        this.loginBack();
      }, 1000);
    },
    async loginBack() {
      let hasOneStroe = false;
      try {
        const res = await getStoreSwitch();
        if (res.data.is_switch_store) {
          uni.removeStorageSync("storeMdData");
          this.$store.commit("setStoreId", res.data.store_id);
          this.$store.commit("setCopyright", res.data.copyright);
          hasOneStroe = true;
          if (this.routeType) this.routeType = "reLaunch";
        }
      } catch (error) {}

      if (this.noLoginTabarPath && this.routeType) {
        this.$utils.toUrl(this.noLoginTabarPath, this.routeType);
        setTimeout(() => {
          this.$store.commit("setNoLoginTabarPath", "");
          this.$store.commit("setRouteType", "");
        }, 0);
      } else {
        if (hasOneStroe) return this.$utils.toUrl("/pages/my/my", "reLaunch");
        this.$utils.goBack();
      }
    },
    onGetPhoneNumberAlipay(e) {
      if (e.detail.encryptedData && e.detail.sign) {
        // let encryptedData = this.encryptedData
        let encryptedData = JSON.stringify({
          response: e.detail.encryptedData,
          sign: e.detail.sign
        });

        uni.login({
          provider: "alipay",
          scopes: "auth_base",
          success: (loginRes) => {
            uni.showLoading({
              title: this.$t("login.inLogin")
            });
            const share_user_id = uni.getStorageSync("parent_user_id");
            const page_type = uni.getStorageSync("page_type");
            this.$allrequest.user
              .auth_phone_alipay({
                response: encryptedData,
                authCode: loginRes.authCode,
                share_user_id,
                mini_id: "",
                page_type
              })
              .then((result) => {
                // uni.showToast({
                // 	title: result.msg,
                // 	icon: "none",
                // 	duration: 1000,
                // });
                if (result.code == 0) {
                  setTimeout(() => {
                    this.afterLogin(result);
                  }, 1000);
                }
              })
              .then(() => {
                uni.hideLoading();
              });
          }
        });
      }
    },
    onGetAuthorizeByAlipay: function (e) {
      let isv_ = uni.getExtConfigSync ? uni.getExtConfigSync() : {};

      // #ifdef MP-ALIPAY
      let isvAppid = "";

      if (isv_ && isv_.shopId) {
        isvAppid = isv_.shopId;
      }
      if (isvAppid) {
        uni.login({
          provider: "alipay",
          scopes: "auth_user",
          success: (loginRes) => {
            uni.showLoading({
              title: this.$t("login.inLogin")
            });
            const share_user_id = uni.getStorageSync("parent_user_id");
            const page_type = uni.getStorageSync("page_type");
            this.$allrequest.user
              .auth_phone_alipay({
                authCode: loginRes.authCode,
                share_user_id: share_user_id,
                page_type
              })
              .then((result) => {
                if (result.code == 0) {
                  setTimeout(() => {
                    this.afterLogin(result);
                  }, 1000);
                }
              })
              .then(() => {
                uni.hideLoading();
              });
          }
        });
      } else {
        my.getPhoneNumber({
          success: (res) => {
            this.encryptedData = res.response;
          },
          fail: (res) => {
            uni.showToast({
              title: this.$t("login.failPhone"),
              icon: "none",
              duration: 1000
            });
          }
        });
      }

      //#endif
    },
    onAuthError: function (e) {
      uni.showToast({
        title: this.$t("login.failPhone"),
        icon: "none",
        duration: 1000
      });
    },

    onBindLogin(e, share_user_id) {
      this.$refs["BindRelation"].showPopup = false;
      this.uniLogin(e, share_user_id);
    },

    async loginSubmit(e = {}) {
      let { nickname, avatar_url } = this.WeChat,
        share_user_id = uni.getStorageSync("parent_user_id"),
        page_type = uni.getStorageSync("page_type");

      if (this.enforce_bind_parent === 1 && this.is_exist_user === 0) {
        // 如果父级id不存在
        // return;
        if (share_user_id) {
          uni.showLoading({
            title: "查询中"
          });
          const res = await getUserInfoById({
            user_id: share_user_id,
            page_type
          });
          uni.hideLoading();
          this.$refs["BindRelation"].parent_id = share_user_id;
          this.$refs["BindRelation"].parent_avatar = res.data.avatar_url;
          this.$refs["BindRelation"].parent_nickname = res.data.nickname;
          this.$refs["BindRelation"].parent_mobile = res.data.mobile;
        }
        this.$refs["BindRelation"].e = e;
        this.$refs["BindRelation"].avatar = avatar_url;
        this.$refs["BindRelation"].nickname = nickname;
        this.$refs["BindRelation"].showPopup = true;
        return;
      }

      this.uniLogin(e, share_user_id);
    },

    uniLogin(e, share_user_id) {
      let { nickname, avatar_url } = this.WeChat;
      uni.login({
        provider: "weixin",
        success: async (loginRes) => {
          let code = loginRes.code;

          const params = {
            ...e,
            _platform: "wx",
            code,
            share_user_id,
            nickname,
            avatar_url
          };
          uni.showLoading({
            title: this.$t("login.inLogin")
          });
          let result = await this.$allrequest.user.auth_phone(params);
          uni.hideLoading();

          // 登录失败
          if (result.code != 0) {
            uni.showToast({
              title: result.msg,
              icon: "none",
              duration: 1000
            });
            return;
          } else {
            //登录成功
            this.afterLogin(result);
          }
        }
      });
    },

    getPhoneNumber: async function (e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        this.loginSubmit(e.detail);
      } else {
        if (e.detail.errno === 104) {
          this.$emit("open");
          return;
        }

        uni.showToast({
          title: this.$t("login.failPhone"),
          icon: "none",
          duration: 1000
        });
      }
    },

    verification() {
      let { nickname, avatar_url } = this.WeChat;

      if (!avatar_url) {
        uni.showToast({
          title: "请上传用户头像",
          icon: "none",
          duration: 1000
        });
        return false;
      }

      if (!nickname) {
        uni.showToast({
          title: "请填写用户昵称",
          icon: "none",
          duration: 1000
        });
        return false;
      }

      if (!this.checked) {
        this.popShow = true;
        return false;
      }

      return true;
    },

    setSubmit() {
      let { checked, WeChat } = this,
        { avatar_url, nickname } = WeChat;
      if (avatar_url && nickname && checked) {
        this.isSubmit = false;
      } else {
        this.isSubmit = true;
      }
    },

    handle() {
      // #ifdef MP-WEIXIN
      if (wx.getPrivacySetting) {
        wx.getPrivacySetting({
          success: (res) => {
            if (res.needAuthorization) {
              this.$utils.toast("未同意隐私协议，该功能不可使用！");
              this.$emit("open");
            }
          },
          fail: () => {},
          complete: () => {}
        });
      } else {
      }
      // #endif
    },

    setChecked() {
      this.checked = true;
      this.popShow = false;
    }
  },

  watch: {
    checked() {
      this.setSubmit();
    },

    WeChat: {
      handler() {
        this.setSubmit();
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;

  .login-content {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .tcp-box {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #f0250e;
      font-size: 25rpx;
      margin-bottom: calc(28rpx + env(safe-area-inset-bottom));
    }
  }

  .head {
    display: flex;
    padding-left: 30rpx;
    padding-right: 30rpx;
    // justify-content: space-between;
    align-items: center;
    height: 88rpx;
    width: 100%;

    > text {
      width: 26rpx;
      height: 26rpx;
      border-left: 2px solid #000;
      border-top: 2px solid #000;
      transform: rotate(-45deg);
    }

    > view {
      // width: 500rpx;
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(29, 29, 29, 0.94);
      opacity: 1;
    }
  }

  .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 220rpx;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #262626;
    font-weight: 600;

    image {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 22rpx;
    }
  }

  .btn {
    margin: 222rpx auto 0;
    width: 600rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background: #2cba0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    font-weight: 600;
    color: #ffffff;
    margin: 222rpx auto 0;
  }
  .toutiao-bt {
    background: #323232;
    color: #fff;
  }
}

.login-from-wrap {
  padding: 70rpx;
}
.login-from-wrap .input-wrap {
  width: 100%;
  background-color: #f9f9f9;
  height: 96rpx;
  border-radius: 60px;
  position: relative;
  padding: 0 30rpx;
}
.login-from-wrap .input-wrap:first-child {
  margin-bottom: 50rpx;
}
.login-from-wrap .input-wrap input {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: transparent;
  font-size: 30rpx;
  padding: 0;
  color: #262626;
}
.login-from-wrap .input-wrap:last-child {
  padding-right: 220rpx;
}
.login-from-wrap .input-wrap view {
  position: absolute;
  width: 200rpx;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  font-size: 24rpx;
  color: #f60313;
  right: 0;
  top: 0;
  z-index: 2;
}
.login-from-wrap .login-btn {
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  border-radius: 60px;
  background-color: #f0250e;
  margin-top: 60rpx;
  font-size: 30rpx;
  color: #fff;
}

.por {
  position: relative;
  z-index: 5;
}

.logo-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.button-initial {
  margin: 200rpx auto 148rpx;
  padding: 0;
  width: 100rpx;
  height: 100rpx;

  image {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
  }
}

.nicknameBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30rpx;
  height: 108rpx;
  border-top: 2rpx solid #eee;
  border-bottom: 2rpx solid #eee;
  font-size: 32rpx;

  .name {
    padding: 0 60rpx 0 30rpx;
    color: #323232;
  }

  .inp {
    flex: 1;
    overflow: hidden;
    width: 100%;
    height: 108rpx;
  }

  .inp-inp {
    font-size: 32rpx;
  }
}

.porBtn {
  position: relative;
}

.verification {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.ts {
  position: absolute;
  left: -54rpx;
  top: -90rpx;
  padding: 16rpx;
  white-space: nowrap;
  font-size: 28rpx;
  color: #fff;
  background: rgba(32, 32, 32, 0.92);
  border-radius: 16rpx;

  &:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 60rpx;
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-top: 14rpx solid rgba(32, 32, 32, 0.92);
  }
}

.pop {
  padding: 24rpx 48rpx 48rpx;
}

.popTit {
  text-align: center;
  font-size: 32rpx;
  color: #262626;
  font-weight: bold;
}

.popDes {
  padding: 24rpx 0 48rpx;
  font-size: 28rpx;
  color: #262626;

  text {
    color: #f0250e;
  }
}

.popBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230rpx;
    height: 76rpx;
    background: #fff;
    border: 1px solid #999;
    border-radius: 32px;
    font-size: 32rpx;
    color: #262626;

    button {
      padding: 0;
      height: 100%;
      width: 100%;
      border-radius: 32px;
      line-height: 76rpx;
      background: #f0250e;
      color: #fff;
      &::after {
        display: none;
      }
    }

    &.s1 {
      border-color: #f0250e;
    }
  }
}
</style>
